<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>元素的显示模式</title>
		<link href="css/xxs.css" rel="stylesheet"/>
	</head>
	<body>
		<!-- 元素的显示模式：
		1.块元素    block
		比较霸道，单独占一行
		默认宽度是父级元素宽度的100%
		可以设置宽，高，对齐属性
		块元素内可以包含行内元素或块元素
		2.行内元素   inline
		一行显示多个
		默认宽度是内容的宽度
		宽、高、对齐属性设置无效
		行内元素里一般只包含文本或其他行内元素
		链接标签中不要再包含链接标签
		3.行内块元素  inline-block
		一行显示多个
		默认宽度是内容本身的宽度
		可以设置宽、高
		<input />、<img />、<td></td>
		元素显示模式转换：
		display:block/inline-block/inline;
		 -->
		 <div>
		     <h4>redmi k70</h4>
		     <p>性能旋风</p>
		     <span>2399元</span>
		     <del>2499元</del>
		 </div>
		 <span>用户名：</span>
		 <input type="text"/>
		 <span>密码：</span>
		 <input type="password"/>
		 <a href="#">baidu</a>
	</body>
</html>
